<template>
    <div class="main">
        <div class="create-form-page">
            <div class="bgw p-10 flex" style="border-bottom: 1px solid rgba(0,0,0,.1);">
                <el-button :type="$route.query.edit ? 'warning' : 'primary'" @click="sendForm">{{ $route.query.edit ?
                    '编辑报价单' : '发送报价单' }}</el-button>
                <supplierSelect v-model="supplierIds" class="ml-20"></supplierSelect>
                <programSelect v-model="project_id" class="ml-20"></programSelect>
            </div>
            <div class="none bgw flex jus-c ali-c" style="height:100%" v-if="!form.length">
                <div style="text-align: center;">
                    <p>暂无可填选表单内容 请前去配置</p>
                    <el-button  @click="$router.push('/template')" type="primary" class="mt-20">前去配置</el-button>
                </div>
            </div>
            <div v-else class="flex" style="height:100%">
                <div class="flex-1 bgw p-20 overscroll" style="padding-right: 100px;">
                    <el-form label-width="140px">
                        <el-form-item v-for="(item, index) in form" :key="'form-item-' + index" :label="item.label_name">
                            <el-input v-model="item.value" v-if="item.control_type == 0"></el-input>
                            <el-radio-group v-model="item.value" v-if="item.control_type == 1">
                                <el-radio :label="ite.name" v-for="(ite, inde) in item.select_json"
                                    :key="`radio-${index}-${inde}`"></el-radio>
                            </el-radio-group>
                            <el-checkbox-group v-model="item.value" v-if="item.control_type == 2">
                                <el-checkbox :label="ite.name" v-for="(ite, inde) in item.select_json"
                                    :key="`checkbox-${index}-${inde}`"></el-checkbox>
                            </el-checkbox-group>
                            <el-input v-model="item.value" type="textarea" :rows="5"
                                v-if="item.control_type == 3"></el-input>
                        </el-form-item>
                    </el-form>
                </div>
                <div class="flex-1  bgw p-20 overscroll"
                    style="padding-right: 100px;border-left: 1px solid rgba(0,0,0,.1);">
                    <preview :formValue="form"></preview>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import preview from './preview.vue'
import supplierSelect from '@/components/supplierSelect.vue'
import programSelect from '@/components/programSelect.vue'
export default {
    data() {
        return {
            form: [],
            supplierIds: [],
            editValue: null,
            project_id:undefined,//项目Id
        }
    },
    components: {
        preview, supplierSelect,programSelect
    },
    async created() {
        let { project_id } = this.$route.query
        project_id ? this.project_id = Number(project_id):''
        this.$loading()
        await this.getForm()
        await this.isEdit()
        this.$loading().close()
    },
    methods: {
        async isEdit() {
            let { id, edit } = this.$route.query
            if (edit) {
                try {
                    let res = await this.$get({
                        url: '/admin/project.ProjectDemand/edit',
                        params: {
                            id: id
                        }
                    })
                    this.editValue = res.row
                    let desc = JSON.parse(res.row.desc)
                    this.form.forEach((item) => {
                        let value = desc.find(ite => item.s_key == ite.option_key).option_value
                        item.value = item.control_type == 2 ? value.split('、') : value
                    })
                    this.project_id = res.row.project_id
                    this.supplierIds =  [res.row.supplier_id]
                } catch (err) {
                    console.log(err)
                }
            }
        },
        sendForm() {
            console.log(this.supplierIds)
            if (!this.supplierIds.length) {
                this.$message.error('请选择要发送的供应商')
                return
            }
            if(!this.project_id){
                this.$message.error('请选择对应项目')
                return
            }
            let { edit } = this.$route.query
            this.$confirm(edit ? '确认填写完全并编辑报价单吗？' : '确认填写完全并发送报价单吗？', '提示', {
                confirmButtonClass: edit ? 'el-button el-button--warning' : '',
                type: edit ? 'warning' : 'info'
            }).then(async () => {
                let res = this.form.filter((item) => item.value).map((item) => {
                    return {
                        option_key: item.s_key,
                        option_value: Array.isArray(item.value) ? item.value.join('、') : item.value
                    }
                })
                try {
                    let { edit } = this.$route.query
                    await this.$post({
                        url: edit ? '/admin/project.ProjectDemand/edit' : '/admin/project.ProjectDemand/add',
                        data: {
                            project_id: this.project_id,
                            supplier_id: 1||this.supplierIds.join(','),
                            desc: res,
                            id: this.editValue ? this.editValue.id : null
                        },
                        successTip: true,
                    })
                    this.$router.back()
                } catch (err) {
                    console.log(err)
                }
            })
        },
        async getForm() {
            let res = await this.$post({
                url: '/admin/formoption.FormOption/index',
                loadingTip: true,
            })
            res.list.forEach((item) => {
                item.select_json = JSON.parse(item.select_json)
                item.value = item.control_type == 2 ? [] : null
            })
            this.form = res.list
        },
    }
}
</script>
<style>
.create-form-page {
    padding: 20px;
    background-color: #f5f5f5;
    height: 100%;
}

.overscroll {
    overflow: scroll;
}
</style>